<template>
  <ThreeBox ref="container"></ThreeBox>
</template>

<script setup>
import ThreeBox from "../../components/ThreeBox.vue";
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { Water } from "../../lib/three/objects/Water2";
import { OrbitControls } from "../../lib/three/controls/OrbitControls";

const container = ref(null);
let threeBox = null;
let threePara = null;
let scene = new THREE.Scene();

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  threePara.renderer.render(scene, threePara.camera);
}

function init() {
  //环境光
  let ambient = new THREE.AmbientLight(0xffffff);
  scene.add(ambient);

  //平行光
  let directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
  directionalLight.position.set(-1, 1, 1);
  scene.add(directionalLight);

  //纹理
  let loader = new THREE.CubeTextureLoader();
  loader.setPath("./three/skybox/HornstullsStrand2/");
  let textureCube = loader.load([
    "posx.jpg",
    "negx.jpg",
    "posy.jpg",
    "negy.jpg",
    "posz.jpg",
    "negz.jpg",
  ]);
  scene.background = textureCube;

  //背景
  let groundGeometry = new THREE.PlaneGeometry(20, 20);
  let groundMaterial = new THREE.MeshStandardMaterial({
    roughness: 0.8,
    metalness: 0.4,
  });
  let ground = new THREE.Mesh(groundGeometry, groundMaterial);
  ground.position.y = -6;
  ground.rotation.x = Math.PI * -0.5;
  scene.add(ground);

  let textureLoader = new THREE.TextureLoader();
  textureLoader.load("./three/textures/hardwood2_diffuse.jpg", function (map) {
    map.wrapS = THREE.RepeatWrapping;
    map.wrapT = THREE.RepeatWrapping;
    map.anisotropy = 16;
    map.repeat.set(4, 4);
    groundMaterial.map = map;
    groundMaterial.needsUpdate = true;
  });

  //水面
  let waterGeometry = new THREE.PlaneGeometry(20, 20);
  let water = new Water(waterGeometry, {
    color: "#fff",
    scale: 4,
    flowDirection: new THREE.Vector2(1, 1),
    textureWidth: 1024,
    textureHeight: 1024,
    normalMap0: textureLoader.load("./three/textures/Water_1_M_Normal.jpg"),
    normalMap1: textureLoader.load("./three/textures/Water_2_M_Normal.jpg"),
  });
  water.rotation.x = Math.PI * -0.5;
  scene.add(water);

  //正方体
  let geometry = new THREE.BoxGeometry(3, 3, 3);
  let material = new THREE.MeshStandardMaterial({ color: 0xffff00 });
  let mesh1 = new THREE.Mesh(geometry, material);
  mesh1.position.x = 7;
  mesh1.position.y = -2.5;
  scene.add(mesh1);
  let mesh2 = new THREE.Mesh(geometry, material);
  mesh2.position.x = -7;
  mesh2.position.y = 2.5;
  scene.add(mesh2);

  //相机
  threePara.camera = new THREE.PerspectiveCamera(
    45,
    threeBox.clientWidth / threeBox.clientHeight,
    0.1,
    200
  );
  threePara.camera.position.set(-15, 7, 15);
  threePara.camera.lookAt(0, 0, 0);

  //渲染器
  threePara.renderer = new THREE.WebGLRenderer();
  threePara.renderer.setPixelRatio(window.devicePixelRatio);
  threePara.renderer.setSize(threeBox.clientWidth, threeBox.clientHeight);
  threeBox.appendChild(threePara.renderer.domElement);

  //控制器
  let controls = new OrbitControls(
    threePara.camera,
    threePara.renderer.domElement
  );
  controls.minDistance = 5;
  controls.maxDistance = 50;
}

onMounted(() => {
  threeBox = container.value.threeBox;
  threePara = container.value.threePara;
  init();
  animate();
});
</script>
